<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios&elementUI</title>
        <!-- 引入 element ui  样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    
    <div id="app">


   <el-form :inline="true" class="demo-form-inline">
   <el-form-item label="姓名">
   <el-input type="text" placeholder="请输入关键字" v-model="patient.name" ></el-input>
  </el-form-item>
  <el-form-item label="地址">
   <el-input type="text" placeholder="请输入关键字" v-model="patient.address"></el-input>
  </el-form-item>
  </el-form-item> 
  <el-form-item label="医保卡">
  <el-input type="text" placeholder="请输入关键字" v-model="patient.cardNo"></el-input>
</el-form-item>
<el-form-item>
   <el-button  @click="getPatient()">查询</el-button>
   <el-button  @click="getPatient()">新增</el-button>
  </el-form-item>
  </el-form>
   <template>
    <el-table
       stripe
      :data="patients"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="80">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="280">
      </el-table-column>
      <el-table-column
      prop="cardNo"
      label="医保卡号"
      width="200">
    </el-table-column>

    <el-table-column label="操作">
        <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
        <template slot-scope="scope">
          <!-- 编辑 执行的函数 handleEdit,索引和整个数据行"对象"-->
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <!-- 删除的时候 执行的函数 handleDelete -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalElements">
        </el-pagination>
      </div>

      <!--修改的dialog界面 -->
      <el-dialog title="修改" :visible.sync="dialogFormVisible">
        <el-form :model="updatepatient">
          <el-form-item label="名字" :label-width="formLabelWidth">
            <el-input v-model="updatepatient.name" autocomplete="off"></el-input>
          </el-form-item>
         
          <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input v-model="updatepatient.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="updatepatient.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="医保卡号" :label-width="formLabelWidth">
            <el-input v-model="updatepatient.cardNo" autocomplete="off"></el-input>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updatePatient">确 定</el-button>
        </div>
      </el-dialog>


  </template>



    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
    <!--1 引入  axios.js-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <!-- 1 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

<script>
    //模板语法来声明式地将数据渲染进 DOM 的系统
     
    //所有vue 页面都要先创建一个Vue对象;
    var app = new Vue({
        // key : value
        // el : 绑定页面dom元素，如果是id为app的元素这里就是 '#app'
        el: '#app',
        //data {}  json格式
        data: {
        
            //有一个对象 保存了从后端返回的结果，同时这个数据可以和页面的模板语法中变量关联
            //可以实时响应 ,这里数组 [] 和后端返回的 []关联
            patients:[],
            totalElements: 0,
            currentPage: 1,
            pageSize: 10,
            //这里写了一个对象，包含patient对象中的属性
            patient:{},
            dialogFormVisible: false,
            //要修改的patient数据，和表单内容相关
            updatepatient:{},
            formLabelWidth: '120px'

        },
        //页面渲染完毕我们就加载数据
        mounted: function() {
          this.getPatient();
        },
        //自定义函数都可以写在 {}
        methods: {
          updatePatient: function(){
            //调用后端接口，返回数据,要使用axios,post请求
            // axios.put(url,json,{headers:{}}).then()
            //调用后端修改接口
            axios.put("http://localhost:9876/patient",JSON.stringify(this.updatepatient),{
               //指定header
               headers: {
                //设置请求头
                   'Content-Type': 'application/json'
                  }
               }).then((res) => {
                //请求成功后
                //res后端返回的结果=>看看，和之前不同
                console.log(res)
                //这里简化了
                if(res.data.status === 'success' && res.data.code === 0){

                   //提示成功
                   this.$message({
                    showClose: true,
                    message: '修改成功!',
                    type: 'success'
                  });

                   //关闭窗口
                   this.dialogFormVisible = false;
                   //重新加载数据
                   this.getPatient();

                }else{
                  this.$message({
                    showClose: true,
                    message: '修改失败!',
                    type: 'error'
                  });
                }
         
            }).catch((err) => {
                console.log("axios error: "+ err)
            });
            
        },
            getPatient: function(){
                //调用后端接口，返回数据,要使用axios,post请求
                // axios.post(url,json,{headers:{}}).then()
                axios.post("http://localhost:9876/patient/page?page="+this.currentPage+"&pageSize="+this.pageSize,JSON.stringify(this.patient),{
                   //指定header
                   headers: {
                    //设置请求头
                       'Content-Type': 'application/json'
                      }
                   }).then((res) => {
                    //请求成功后
                    //res后端返回的结果=>看看，和之前不同
                    console.log(res)
                    //特别注意: this的引用，如果=>函数，可以看到这里能正常引用到patient对象
                    // =>res.data中
                    this.patients = res.data.content;
                    this.totalElements = res.data.totalElements;
                    this.currentPage = res.data.pageable.pageNumber+1;
                    
                }).catch((err) => {
                    console.log("axios error: "+ err)
                });
                
            },
            //修改
            handleEdit(index, row) {
              //设置dialogFormVisible 的值为true
               this.dialogFormVisible  = true;
                console.log(index, row);
                this.updatepatient = row;
              },
              //删除
              handleDelete(index, row) {
                console.log(index, row);

                this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  //你选择了确定
                  //后续的代码就是要ajax提交到后端接口
                 // axios.delete(url).then()
                  axios.delete("http://localhost:9876/patient?id="+row.id).then((res) => {
                    //请求成功后
                   
                    console.log(res)
                    //这里简化了
                    if(res.data.status === 'success' && res.data.code === 0){
                       //提示成功
                       this.$message({
                        showClose: true,
                        message: '删除成功!',
                        type: 'success'
                      });                
                       //重新加载数据
                       this.getPatient();
    
                    }else{
                      this.$message({
                        showClose: true,
                        message: '删除失败!',
                        type: 'error'
                      });
                    }
             
                });
                }).catch(() => {
                  //你点击了取消
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });



              },
              //改变每页记录数
              handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                //当前用户选择的每页显示几条记录呢
                this.pageSize = val
                this.currentPage = 1
                //重新调用getPatient()
                this.getPatient()
              },
              //翻页(点击页码)
              handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                //用户翻到了第几页呢? val
                this.currentPage = val
                //重新调用getPatient()
                this.getPatient()
              }

        }

    });

   
   

</script>
</body>
</html>